<template>
    <nav
        class="navbar main-navbar px-4 border-b"
        :class="[
            theme.isDark
                ? 'bg-dark navbar-dark border-gray-700'
                : 'bg-light navbar-light border-gray-200'
        ]"
    >
        <!-- 左侧：主题切换 -->
        <ThemeToggle />

        <!-- 右侧：功能入口 -->
        <div v-if="auth.token" class="ms-auto d-flex align-items-center gap-3">
            <!-- 每个图标 dropdown -->
            <DropdownMenu
                :icon="cnetosIcon"
                alt="服务器"
                title="服务器管理"
                :items="[
                    // { label: '流量查询', to: '/trafficStats' },
                    { label: '流量图表', to: '/portFlowChart' }
                ]"
            />

            <DropdownMenu
                :icon="billIcon"
                alt="账单"
                title="账单相关"
                :items="[
                    { label: '账单列表', to: '/' },
                    { label: '图表分析', to: '/charts' },
                    { label: '分类管理', to: '/categories' }
                ]"
            />

            <DropdownMenu
                :icon="profileIcon"
                alt="个人中心"
                title="个人资料"
                :items="[
                    { label: '个人资料', to: '/profile' },
                    { label: '修改密码', to: '/resetPassword' },
                    { divider: true },
                    { label: '退出登录', action: handleLogoutClick, danger: true }
                ]"
            />
        </div>
    </nav>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useThemeStore } from '../store/theme';
import { useAuthStore } from '../store/auth';
import ThemeToggle from '../components/ThemeToggle.vue';
import DropdownMenu from '../components/ui/DropdownMenu.vue';

import { useConfirm } from '../composables/useConfirm';
import { useToast } from '../composables/useToast';

// 引入图标
import cnetosIcon from '../assets/icons/Centos.svg';
import billIcon from '../assets/icons/账单.svg';
import profileIcon from '../assets/icons/个人中心.svg';

const theme = useThemeStore();
const auth = useAuthStore();
const router = useRouter();

const { openConfirm } = useConfirm();
const { success } = useToast();

// 退出登录逻辑
const handleLogoutClick = async () => {
    const confirmed = await openConfirm({
        title: '确认退出登录？',
        content: '你确定要退出登录吗？',
        icon: 'bi bi-box-arrow-right',
        confirmText: '退出',
        cancelText: '取消',
        confirmDanger: true
    });

    if (confirmed) {
        auth.clearToken();
        router.push('/login');
        success('退出登录成功~');
    }
};
</script>

<style scoped>
.main-navbar {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
</style>
